<template>
	<view class="likeList">
		<template v-if="listLike.length">
			<view
				@click="$_To('user/user?uid=' + item.uid)"
				class="for"
				v-for="(item,index) in listLike">
				<text class="digit">{{index+1}}</text>
				<view class="avatar">
					<image :src="item.avatar" mode="widthFix"></image>
				</view>
				<text class="nickname">{{item.nickname}}</text>
				<text class="iconfont icon-arrow-right"></text>
			</view>
			<view class="listLikePage" @click="clickMore">点击加载更多</view>
		</template>
		<template v-else>
			<public-loading></public-loading>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listLike:[],
				listLikePage:2,
			}
		},
		onLoad(e) {
			this.pid = e.pid;
			this.getLikeList();
		},
		methods: {
			// 点赞列表
			getLikeList(){
				// 请求，点赞，列表
				this.$_Request(
					"GET","/api/v2/post/" + this.pid + "/interaction/likers",
					{
						"whitelistKeys":"uid,nickname,avatar",
					},
					(res) => {
						this.listLike = res.data.data.list;
					}
				)
			},
			clickMore(){
				uni.showLoading({ title: "加载中" });
				this.$_Request(
					"GET","/api/v2/post/" + this.pid + "/interaction/likers",
					{
						"whitelistKeys":"uid,nickname,avatar",
						"page":this.listLikePage
					},
					(res) => {
						if(res.data.data.list.length){
							this.listLike = this.listLike.concat(res.data.data.list);
							this.listLikePage++
							uni.hideLoading();
						}else{
							uni.showToast({
								title: "没有数据啦",
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			}
		}
	}
</script>

<style lang="scss">
.likeList{
	.for{
		padding: 25rpx;
		border-bottom: 1rpx solid $BianKuangSe;
		display: flex;
		align-items: center;
		.digit{
			flex-shrink: 0;
			font-size: 28rpx;
			line-height: 28rpx;
			color: $ZhanWeiSe;
		}
		.avatar{
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			border-radius: 100%;
			margin: 0 15rpx;
		}
		.nickname{
			flex: 1;
		}
		.icon-arrow-right{
			flex-shrink: 0;
			font-size: 28rpx;
			line-height: 28rpx;
			color: $ZhanWeiSe;
		}
	}
	.listLikePage{
		text-align: center;
		font-size: 28rpx;
		line-height: 28rpx;
		color: $ZhanWeiSe;
		padding: 25rpx;
	}
}
</style>
